import React from 'react';
import classNames from 'classnames';
import { Icon, Tools } from 'weaver-mobile';
import If , {Then, Else} from '../if';
import './index.less';
import RenderInBody from './RenderInBody';

const getLabel = Tools.getLabel; 
const defLiHeight = 40;
const canCelHeight = 65;

export default class SelectDown extends React.Component {
  constructor (props) {
    super(props);

    this.state = {
      datas: props.datas,
      onClick: props.onClick,
      selectedId: props.selectedId,
      status: false, // 面板下拉状态
      selectedName: '全部分组',
      height: 0,
      liHeight: props.liHeight,
      clsName: props.clsName, // 点击部分的类名
      downClsName: props.downClsName, // 下拉面板的类名
      showIcon: props.showIcon,
      showCancel: props.showCancel
    }
  }

  componentDidMount() {
    this.getSelectedName();
    this.getSelectDownHeight();
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.visible === false) {
      this.hideSelectPanel();
    }
  }

  componentDidUpdate(preProps) {
    if (preProps.datas !== this.props.datas || preProps.selectedId !== this.props.selectedId) {

      this.setState({
        datas: this.props.datas,
        selectedId: this.props.selectedId
      }, () => {
        this.getSelectedName();
        this.getSelectDownHeight();
      });
    } 
  }

  componentWillUnmount() {
    this.setState({ status: false });
  }

  getSelectedName = () => {
    const { selectedId, datas } = this.state;
    let selectedName = '全部';
    
    datas && datas.forEach( data => {
      if (data.id === selectedId) {
        selectedName = data.name;
      }
    });

    this.setState({ selectedName });
  }

  getSelectDownHeight = () => {
    const { datas, liHeight, showCancel } = this.state;
    const LiHeight = liHeight || defLiHeight;
    const addHeight = showCancel ? canCelHeight : 0;

    if (datas) {
      this.setState({ height: datas.length * LiHeight + addHeight });
    }
  }
  
  toggleStatus = () => {
    this.setState({ status: !this.state.status });
  }

  hideSelectPanel = () => {
    this.setState({ status: false });
  }

  render () {
    const {
      datas,
      onClick,
      status,
      selectedId,
      selectedName,
      clsName,
      downClsName,
      height,
      showIcon = true,
      showCancel = false
    } = this.state;

    return (
      <React.Fragment>
        <div className={`group-select ${clsName}`} onClick={this.toggleStatus}>
          <span>{selectedName}</span>
          <div className='icon-down'>
            <If condition={status}>
              <Then>
                <Icon type='up' size='xs' />
              </Then>
              <Else>
                <Icon type='down' size='xs' />
              </Else>
            </If>
          </div>
        </div>
        <RenderInBody
          clsName={downClsName}
        >
          <div 
            className={classNames('edc-app-mobile-select', {'edc-app-mobile-select-up': !status})}
            style={{height: height + 'px'}}
          >
            <ul>
              {
                datas.map( data => 
                  <li 
                    key={`${data.id}_${data.name}`} 
                    onClick={() => {onClick(data.id, data.name); this.toggleStatus();}}
                    className={classNames({'selected': data.id === selectedId})}
                  >
                    { showIcon &&
                      <If condition={data.id === selectedId}>
                        <Icon type={'check'} size='xs' ></Icon>
                      </If>
                    }
                    <span className='name'>{data.name}</span>
                    { data.label &&
                      <span className='label'>{data.label}</span>
                    }
                  </li>
                )
              }
            </ul>
            {
              showCancel && 
              <span className='selected-cancel' onClick={this.toggleStatus}>{getLabel(523250, '取消')}</span>
            }
          </div>
          <div 
            className={classNames('edc-app-mobile-mask', { 'edc-app-mobile-mask-hide': !status })} 
            onClick={this.toggleStatus} 
          />
        </RenderInBody>
      </React.Fragment>
    )
  }
}